<template>
    <view class="swiper-container1" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="changeTab">
        <view class="swiper1">
            <view v-for="(tab, index) in tabList" :key="index" class="page1" :style="getPageStyle(index)">
                <!-- <view v-if="currentTabIndex == 1" v-for="(i) in 100">{{ tab }}Content{{ i }}</view>
                <view v-else v-for="(i) in 10">{{ tab }}Content{{ i }}</view> -->
                <!-- {{ tab }} Content -->
                <view><slot></slot></view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: 'BhTabbarcontent',
    emits: ['changeTab'],
    props: {
        tabList: {
            type: Array,
            default: []
        },
        currentTabIndex: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            startPosX: 0, // 手势滑动起始位置
            deltaX: 0, // 手势滑动的距离
            transitionDuration: 0.3 // 过渡动画时间
        }
    },
    methods: {
        changeTab(tabIndex) {
            const threshold = 50; // 滑动阈值，超过该值切换页面

            if (this.deltaX > threshold && this.currentTabIndex > 0) {
                this.$emit('changeTab', this.currentTabIndex - 1)
                // this.changeTab(this.currentTabIndex - 1)
                // this.currentTabIndex--;
            } else if (this.deltaX < -threshold && this.currentTabIndex < this.tabList.length - 1) {
                this.$emit('changeTab', this.currentTabIndex + 1)
                // this.changeTab(this.currentTabIndex + 1)
                // this.currentTabIndex++;
            }

            this.deltaX = 0; // 重置滑动距离
            // this.$emit('changeTab', tabIndex)
        },
        onTouchStart(event) {
            console.log('触摸屏幕开始移动', event)
            this.startPosX = event.touches[0].clientX;
        },
        onTouchMove(event) {
            console.log('触摸屏幕移动中', event)
            this.deltaX = event.touches[0].clientX - this.startPosX;
        },
        onTouchEnd() {
            const threshold = 50; // 滑动阈值，超过该值切换页面

            if (this.deltaX > threshold && this.currentTabIndex > 0) {
                this.changeTab(this.currentTabIndex - 1)
                // this.currentTabIndex--;
            } else if (this.deltaX < -threshold && this.currentTabIndex < this.tabList.length - 1) {
                this.changeTab(this.currentTabIndex + 1)
                // this.currentTabIndex++;
            }

            this.deltaX = 0; // 重置滑动距离
        },
        getPageStyle(index) {

            // const offset = (index - this.currentTabIndex) * 100; // 页面偏移量
            // const offset = index * 100;
            console.log('页面对应的pageStyle，', index, this.currentTabIndex, offset)

            const offset = -this.currentTabIndex * 100;
            return {
                transform: `translateX(${offset}%)`,
                transition: `transform ${this.transitionDuration}s ease-in-out`
            }
            // return {
            //   transform: `translateX(${offset}%)`,
            //   transition: `transform ${this.transitionDuration}s ease-in-out`
            // };
        }
    }
}
</script>
<style>
.swiper-container1 {
  height: 100vh;
  overflow: hidden;
}

.swiper1 {
  display: flex;
  width: 300%; /* 页面宽度为页面数的3倍 */
  transition: transform 0.3s ease-in-out;
}

.page1 {
  flex: 1;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f5f5f5;
  font-size: 18px;
}
</style>